<template>
	<view class="content">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="list" v-for="(item, i) in list" :key="i">
				<view class="main">
					<view class="title">本人反馈：</view>
					<view class="li">
						<view class="tit">反馈时间：</view>
						<view class="txt">{{$filters.formatDate(item.createTime)}}</view>
					</view>
					<view class="li">
						<view class="tit">反馈内容：</view>
						<view class="txt">
							<textEllipsis :text="item.feedback"></textEllipsis>
						</view>
					</view>
					<view class="li" v-if="item.feedbackImage">
						<view class="tit">反馈图片：</view>
						<view class="pic">
							<image class="img" v-for="(img,k) in item.feedbackImage" :key="'img'+k" :src="img" mode="aspectFill" @click="previewImage(item.feedbackImage,k)"></image>
						</view>
					</view>
				</view>
				<view class="main" v-if="item.processingProgram">
					<view class="title">客服回复：</view>
					<view class="li">
						<view class="tit">回复时间：</view>
						<view class="txt">{{$filters.formatDate(item.processingTime)}}</view>
					</view>
					<view class="li">
						<view class="tit">回复内容：</view>
						<view class="txt">
							<textEllipsis :text="item.processingProgram"></textEllipsis>
						</view>
					</view>
					<view class="li" v-if="item.processingImage">
						<view class="tit">回复图片：</view>
						<view class="pic">
							<image class="img" v-for="(img,k) in item.processingImage" :key="'img'+k" :src="img" mode="aspectFill" @click="previewImage(item.processingImage,k)"></image>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { feedbackList } from '@/common/API/member'
import textEllipsis from '@/components/text-ellipsis/index.vue'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	let data = {
		pageNo: mescroll.num,
		pageSize: mescroll.size
	}
	let res = await feedbackList(data)
	let curPageData = res.list;
	let curPageLen = curPageData.length;
	if(mescroll.num == 1) list.value = [];
	list.value = list.value.concat(curPageData);
	mescroll.endSuccess(curPageLen);
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}

//预览
const previewImage = (arr,i) => {
	uni.previewImage({
		urls: arr,
		current: i
	})
}
</script>
<style lang="scss" scoped>
.content{
	.list{
		width: 686rpx;
		background: #fff;
		box-shadow: 0 0 16rpx 2rpx rgba(0,0,0,0.08);
		border-radius: 8rpx;
		margin: 20rpx auto;
		.main{
			border-bottom: 2rpx solid #f3f3f3;
			padding: 22rpx 28rpx 38rpx;
			&:last-child{
				border-bottom: none;
			}
			.title{
				font-size: 32rpx;
				font-weight: bold;
			}
			.li{
				display: flex;
				padding: 6rpx 0;
				.tit{
					width: 172rpx;
					font-size: 30rpx;
					line-height: 38rpx;
				}
				.txt{
					font-size: 30rpx;
					width: 500rpx;
					line-height: 38rpx;
					word-break: break-all;
				}
				.pic{
					width: 500rpx;
					.img{
						width: 145rpx;
						height: 145rpx;
						margin: 0 10rpx 0 0;
					}
				}
			}
		}
	}
}
</style>